<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>
</head>
<body>
  <!-- 表单用于搜集信息
  表单的组成,  表单域(form 控件所包含的区域),表单控件(input,select radio),提示信息(用户名,)
action 传输信息的地方,method 提交信息的方式, get post,put ,delete
placeholder 提示信息,value 赋默认值
-->
  <form action="http://192.168.169.2/query" method="GET" >
    <!-- type="text" 文本输入框 输入什么就显示什么 -->
    <!-- label 包围提示信息,for 控件的id的值 -->
    <label for="username">用户名 </label>
   <input id="username" type="text" name="username" value="默认值">
   <!--   type="password" 密码输入框,输入数据之后,不会显示出来 -->
   <input type="password" name="password" placeholder="提示信息"> <br>
   <!-- type="submit" 提交表单的信息,将数据发送到后台  -->
    性别 <!-- 必须要有name,name的值要一样,不一样的话,没有单选的效果,必须赋默认值 
    checked 默认勾选,es6 新的规定,属性值是本身的话,写不写无所谓
    -->
    <!-- 单选和复选框比用label 
    label 可以提升用户的体验感
    -->
    <input type="radio" name="gender" value="男" checked  >
    <label for="gender1">美女</label>
    <input id="gender1" type="radio" name="gender" value="男" > <br>
    爱好
    
    <input type="checkbox" name="like" checked value="抽烟"  >
    <input type="checkbox" name="like" value="喝酒"  >
    <input type="checkbox" name="like" value="烫头"  ><br>
    <!-- ctrl +alt+下 赋值当前行下上 --> 
    <!-- 移动代码 alt+上 -->
    <!-- ctrl+D 删除当前行 -->
    
    地址
    <!-- 也需要传名字 也需要给value 赋值,默认显示的是第一个
    -->
    <select name="addr" >
      <option value="">请选择</option>
      <option selected value="河北">河北</option>
      <option value="承德">承德</option>
    </select>
    <br>
    自我介绍
    <!--  文本域 大段的文字 cols列的字数, rows 显示几行 -->
    <textarea name="selinfo" id="" cols="30" rows="5">

    </textarea>
    <input type="submit" value="天娇">   
   <!-- 将数据变成原来的样式,并不一定是数据消失-->
   <input type="reset" value="重置">
  </form>
</body>
</html>